<template>
  <div class="talkHistory">
    <div class="header_box">
      <header1View>
        <template v-slot:left>
          <div class="left">
            <van-icon class="icon"
                      name="arrow-left"
                      @click="back" />
          </div>
        </template>
        <template v-slot:center>
          <div class="header_center">
            协商历史
          </div>
        </template>
      </header1View>
    </div>
    <div class="content">
      <!-- 卖家信息 -->
      <div class="seller">
        <!-- 店铺头像，信息 -->
        <div class="sellerInfo">
          <div class="seller_left">
            <img src="https://cdn3.axureshop.com/demo/1525603/images/%E5%95%86%E5%93%81%E8%AF%A6%E6%83%85%E5%BF%AB%E7%85%A7/u11675.jpg"
                 alt="">
          </div>
          <div class="seller_right">
            <div>默林如斯的肠粉早餐店（凤凰广场店）</div>
            <div>2021-12-07 18:30:40</div>
          </div>
        </div>
        <!-- 退款详情 -->
        <div class="apply">商家拒绝退款</div>
        <div class="reason">拒绝原因：其他</div>
        <div class="desc">补充说明：与顾客协商赠送一瓶可乐</div>
      </div>

      <!-- 买家信息 -->
      <div class="buyer">
        <div class="sellerInfo">
          <div class="seller_left">
            <img src="https://cdn3.axureshop.com/demo/1525603/images/%E5%95%86%E5%93%81%E8%AF%A6%E6%83%85%E5%BF%AB%E7%85%A7/u11675.jpg"
                 alt="">
          </div>
          <div class="seller_right">
            <div>小默123</div>
            <div>2021-12-07 18:23:40</div>
          </div>
        </div>
        <!-- 退款详情 -->
        <div class="apply">顾客发起了退款申请</div>
        <div class="reason">退款原因：计划有变，不想要了</div>
        <div class="desc">补充说明：点了别的外卖</div>
      </div>
    </div>
  </div>
</template>

<script>
import header1View from '../../components/OrdersComponents/header1View'
export default {
  data () {
    return {

    }
  },
  components: {
    header1View
  },
  methods: {
    back () {
      this.$router.go(-1)
    }
  }
}
</script>

<style scoped lang="scss">
* {
  padding: 0;
  margin: 0;
}
.header_center {
  text-align: center;
  margin: 0 auto;
}
.content {
  min-height: 100vh;
  background-color: #f5f5f5;
  font-size: 14px;
  padding: 15px;
}
.icon {
  position: absolute;
  left: 10px;
  top: 50%;
  margin-top: -8px;
}
.seller,
.buyer {
  padding: 15px;
  border-radius: 10px;
  background-color: #fff;
}
.sellerInfo {
  display: flex;
}
.seller_left img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
.seller_right {
  margin-left: 8px;
  height: 25px;
  line-height: 25px;
}
.buyer {
  margin-top: 15px;
}
.apply {
  height: 30px;
  line-height: 30px;
  font-size: 14px;
  font-weight: 400;
}
.reason,
.desc {
  height: 30px;
  line-height: 30px;
  font-size: 12px;
  color: #848181;
}
</style>